<!DOCTYPE html>
<html>
  <head>
    <title>图片合成预览</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--jquery-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

    <!--矢量图绘制框架-->
    <script src="js/raphael/raphael.min.js"></script>
    <script src="js/svg/svg.js"></script>

    <!--拖拽插件-->
    <script src="js/svg/svg.draggable.js"></script>

    <!--代码编辑插件-->
    <link rel="stylesheet" href="js/codemirror/codemirror.css" />
    <link rel="stylesheet" href="js/codemirror/theme/cobalt.css" />
    <script src="js/codemirror/codemirror.js"></script>
    <script src="js/codemirror/mode/javascript.js"></script>

    <!--png转换插件-->
    <script type="text/javascript" src="js/converter//saveSvgAsPng.js"></script>

    <script src="js/design/design.js"></script>

    <!--JSON压缩库-->
    <script src="js/json/minify.json.js"></script>
    <!--模型适配器-->
    <script src="js/adapter/adapter.js"></script>

    <!--ui Form插件-->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css"
    />
    <script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
    <script src="js/ui/schema.js"></script>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

    <script>
      //数据
      var data = {
        posterurl: "http://eddyzhang1986.gitee.io/memefood/img/background.jpeg",
        posterwidth: 320,
        posterheight: 600,
        headimg: "http://eddyzhang1986.gitee.io/memefood/img/avatar.jpg",
        headimgx: 0,
        headimgy: 0,
        headimgwidth: 100,
        headimgheight: 100,
        membername: "会员名称",
        membernamex: 0,
        membernamey: 0,
        membernamewidth: 100,
        membernameheight: 100,
        qrcode: "http://eddyzhang1986.gitee.io/memefood/img/qrcode.jpg",
        qrcodex: 100,
        qrcodey: 0,
        qrcodewidth: 100,
        qrcodeheight: 100
      };

      //加载成功后
      // $(function() {
      //   var mirror, design;
      //   //初始化代码编辑器
      //   mirror = CodeMirror.fromTextArea(document.getElementById("code"), {
      //     lineNumbers: true,
      //     styleActiveLine: true,
      //     matchBrackets: true,
      //     mode: "javascript",
      //     theme: "cobalt"
      //   });
      //   mirror.setSize(600, 400);
      //   mirror.setValue(memeparser.fillcomment(JSON.stringify(data, null, 2)));
      //   //改变json改变界面
      //   mirror.on("change", function() {
      //     try {
      //       var data = JSON.parse(memeparser.removecomment(mirror.getValue()));
      //       var ui = memeparser.parse2ui(data);
      //       design.setSize(data.posterwidth, data.posterheight);
      //       $("#size").html(
      //         "画布大小" + data.posterwidth + "*" + data.posterheight
      //       );
      //       design.setUI(ui);
      //     } catch (err) {
      //       console.log(
      //         "json转换失败:" + memeparser.removecomment(mirror.getValue())
      //       );
      //       console.log(err);
      //     }
      //   });
      //   //初始化设计器
      //   design = new Design("canvas", {
      //     paper: {
      //       el: "canvas",
      //       width: data.posterwidth,
      //       height: data.posterheight
      //     },
      //     ui: memeparser.parse2ui(data),
      //     uiChange: function(ui) {
      //       var data = memeparser.parse2model(ui);
      //       var json = memeparser.fillcomment(JSON.stringify(data, null, 2));
      //       mirror.setValue(json);
      //     }
      //   });

      //   //设置初始画布大小
      //   $("#size").html(
      //     "画布大小" + data.posterwidth + "*" + data.posterheight
      //   );

      //   //转换PNG按钮
      //   $("#downloadpng").click(function() {
      //     saveSvgAsPng(
      //       document.getElementById("canvas").querySelector("svg"),
      //       "meishi.png"
      //     );
      //   });

      //   //初始化UI Form
      //   var form = Formio.createForm(
      //     document.getElementById("formio"),
      //     schema
      //   ).then(function(form) {
      //     // Register for the submit event to get the completed submission.
      //     form.on("submit", function(submission) {
      //       console.log("Submission was made!", submission);
      //     });

      //     // Everytime the form changes, this will fire.
      //     form.on("change", function(changed) {
      //       console.log("Form was changed", changed);
      //     });
      //   });
      // });

      //从 canvas 提取图片 image
      function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
      }
      //加载成功后
      $(function() {
        html2canvas(document.querySelector("#capture")).then(canvas => {
          var img = convertCanvasToImage(canvas);
          document.body.appendChild(img);
        });
        var design, formio;

        //初始化设计器
        design = new Design("canvas", {
          paper: {
            el: "canvas",
            width: data.posterwidth,
            height: data.posterheight
          },
          ui: memeparser.parse2ui(data),
          uiChange: function(ui) {
            var data = memeparser.parse2model(ui);
            //修改画布
            if (formio) {
              formio.submission = {
                data: data
              };
            }
          }
        });

        //formio
        Formio.createForm(document.getElementById("formio"), schema).then(
          function(form) {
            //加载完毕提升到全局变量
            formio = form;
            //首次加载数据
            form.submission = {
              data: data
            };
            //初始画布大小
            $("#size").html(
              "画布大小" + data.posterwidth + "*" + data.posterheight
            );
            //每次改变时
            form.on("change", function(changed) {
              var data = changed.data;
              var ui = memeparser.parse2ui(data);
              design.setSize(data.posterwidth, data.posterheight);
              $("#size").html(
                "画布大小" + data.posterwidth + "*" + data.posterheight
              );
              design.setUI(ui);
            });
            return form;
          }
        );

        //转换PNG按钮
        $("#downloadpng").click(function() {
          saveSvgAsPng(
            document.getElementById("canvas").querySelector("svg"),
            "meishi.png"
          );
        });
      });
    </script>
  </head>
  <body>
    <div style="display: block;">
      <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
      </div>
    </div>
    <img
      src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='0' x2='200' y2='200' style='stroke:rgb(255,0,0);stroke-width:2' /></svg>"
    />
    <img src="img/logo.svg" alt="svg" />
    <div style="float:left">
      <div id="size"></div>
      <div id="canvas"></div>
    </div>
    <div style="float:left;margin-left: 20px;">
      <div id="formio" style="width: 800px;"></div>
      <input type="button" id="downloadpng" value="下载png" />
    </div>
  </body>
</html>
